import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface KxLaborJobPresentPieChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxLaborJobPresentPieChartOption = ({
  dataSource = [],
}: KxLaborJobPresentPieChart): EChartsOption => {
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});

  const color = [
    "#2CFFFF",
    "#986BF6",
    "#FFE347",
    "#FF9334",
    "#49FF6B",
    "#52C41A ",
    "#1677FF",
    "#F759AB",
    "#FF4D4F ",
    "#FAAD14",
  ];
  const data = dataSource.map((d, index) => {
    return {
      value: d.amount || 0,
      name: d.name || "",
      itemStyle: {
        color: color[index],
      },
    };
  });
  const data1 = dataSource.map((d, index) => {
    return {
      value: d.amount || 0,
      name: d.name || "",
      itemStyle: {
        color: color[index],
        opacity: 0.3,
      },
    };
  });

  return {
    legend: {
      selectedMode: false,
      orient: "vertical",
      itemWidth: 20,
      itemHeight: 8,
      itemGap: 22,
      icon: "circle",
      right: "2%",
      top: "center",

      formatter: function (name) {
        return "{a|" + name + "}{b|" + nameMap[name] + "}";
      },
      textStyle: {
        rich: {
          a: {
            color: "#ffffff",
            width: 71,
            fontSize: 14,
            fontWeight: "bold",
            align: "left",
          },
          b: {
            color: "#ffffff",
            fontSize: 14,
            width: 56,
            fontWeight: "bold",
          },
        },
      },
      data: dataSource.map((d) => d.name || ""),
    },
    series: [
      {
        name: "title",
        type: "pie",
        startAngle: 280,
        radius: ["63%", "70%"],
        center: ["30%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          lineHeight: 25,
        },

        color: ["red"],
        data: data,
      },
      {
        name: "",
        type: "pie",
        startAngle: 280,
        radius: ["58%", "53%"],
        center: ["30%", "50%"],
        zlevel: 3,

        legendHoverLink: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },

        itemStyle: {
          borderColor: "#0a1a2a",
          borderWidth: "3",

          // ellipsis: {
          //   borderColor: "#0a1a2a",
          // },
        },
        tooltip: {
          show: false,
        },
        data: data1,
      },
      {
        name: "title",
        type: "pie",
        zlevel: 5,
        hoverAnimation: false,
        legendHoverLink: false,
        radius: ["75%", "76%"],
        center: ["30%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          textStyle: {
            lineHeight: 25,
          },
        },
        itemStyle: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          borderColor: "#284772",
          color: "#284772",
        },
        data: [
          {
            value: 41,
            name: "低级",
          },
        ],
      },
      {
        name: "title",
        type: "pie",
        zlevel: 5,
        hoverAnimation: false,
        legendHoverLink: false,
        radius: ["48%", "47%"],
        center: ["30%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          textStyle: {
            lineHeight: 25,
          },
        },
        itemStyle: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          borderColor: "#284772",
          color: "#284772",
        },
        data: [
          {
            value: 41,
            name: "低级",
          },
        ],
      },
    ] as any[],
    graphic: [
      {
        type: "group",
        left: "26%",
        top: "45%",
        children: [
          {
            type: "text",
            z: 100,
            top: "middle",
            style: {
              fill: "#FDFFFF",
              text: "工种",
              fontSize: 18,
              // font: '48px Microsoft YaHei',
            },
          },
        ],
      },
    ],
  };
};

const kxLaborJobPresentPieChart = ({
  reactEChartsProps,
  dataSource,
}: KxLaborJobPresentPieChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "295px",
      }}
      option={getKxLaborJobPresentPieChartOption({
        dataSource,
      })}
    />
  );
};

export default kxLaborJobPresentPieChart;
